<template>
  <u-tabbar
    style="height: 60px; padding-bottom: 20rpx"
    :value="currentPage"
    @change="onTabbarChange"
    :safeAreaInsetBottom="false"
  >
    <u-tabbar-item v-for="item in tabbarList" :key="item.id" :text="item.text">
      <image
        class="u-page__item__slot-icon"
        slot="inactive-icon"
        :src="item.icon"
      ></image>
      <image
        class="u-page__item__slot-icon"
        slot="active-icon"
        :src="item.selectIcon"
      ></image>
    </u-tabbar-item>
  </u-tabbar>
</template>

<script>
export default {
  name: 'Tabbar',
  props: {
    currentPage: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      currentItem: 0,
      tabbarList: [
        {
          id: 0,
          path: "/pages/index/index",
          icon: "../static/icon/nxx1.png",
          selectIcon: "../static/icon/xx.png",
          text: "订单",
          centerItem: false
        },
        {
          id: 1,
          path: "/pages/treatment/treatment",
          icon: "../static/icon/nzl.png",
          selectIcon: "../static/icon/zl.png",
          text: "诊疗",
          centerItem: true
        },
        {
          id: 2,
          path: "/pages/message/message",
          icon: "../static/icon/kepu.png",
          selectIcon: "../static/icon/kepu_x.png",
          text: "科普",
          centerItem: false
        },
        {
          id: 3,
          path: "/pages/my/my",
          icon: "../static/icon/nmy.png",
          selectIcon: "../static/icon/my.png",
          text: "我的",
          centerItem: false
        },
      ],
    };
  },
  mounted() {
    // this.currentItem = this.currentPage;
    //uni.hideTabBar();
  },
  methods: {
    onTabbarChange(item) {
      this.$emit("onTabBarChange", item);
      uni.setNavigationBarTitle({
        title: this.tabbarList[item].text,
      });

    },
  },
};
</script>
<style>
view {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.tabbar-container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 110rpx;
  /* box-shadow: 0 0 5px #999;  */
  box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.16);
  border-top: 1px;
  display: flex;
  align-items: center;
  padding: 5rpx 0;
  color: #999999;
  z-index: 200;
  background-color: #fff;
}
.tabbar-container .tabbar-item {
  width: 33%;
  height: 100rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.tabbar-container .item-active {
  color: #175cff;
}
.tabbar-container .center-item {
  display: block;
  position: relative;
}
.tabbar-container .tabbar-item .item-top {
  width: 70rpx;
  height: 70rpx;
  padding: 10rpx;
}
.tabbar-container .center-item .item-top {
  flex-shrink: 0;
  width: 100rpx;
  height: 100rpx;
  position: absolute;
  top: -50rpx;
  left: calc(50% - 50rpx);
  border-radius: 50%;
  box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.16);
  /* box-shadow: 0 0 5px #999;  */
  background-color: #ffffff;
}
.tabbar-container .tabbar-item .item-top image {
  width: 100%;
  height: 100%;
}

tabbar-container .tabbar-item:nth-child(3) .item-top image {
  background: #ff0000;
}

.tabbar-container .tabbar-item .item-bottom {
  font-size: 28rpx;
  width: 100%;
}
.tabbar-container .center-item .item-bottom {
  position: absolute;
  bottom: 5rpx;
}
</style>
